<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList — 千锋教育版权所有</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
</head>

<body>
    <header>
        <section>
            <form>
                <label for="title">
                        <img src="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/619cd39e955cea7c6718d38afd084162002a1dab.jpeg?sign=f3720165756a2ba0971a4298d71e755e&t=6077acca" />
                    </label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
            </form>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        <p>
            Copyright &copy; 2021 千锋教育 版权所有
            <a href="javascript:;">京ICP备15058198号</a>
        </p>
        <p>
            您当前的ip地址是：<strong id="ipv4">10.0.39.251</strong
                >，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong>
        </p>
    </footer>
    <script type="text/javascript" src="./assets/js/index.js"></script>
</body>
<script>
    var title = document.getElementById("title")
    var todolist = document.getElementById("todolist")
    var donelist = document.getElementById("donelist")

    function bindEvent() {
        title.onkeydown = function(e = event) {
            var code = e.keyCode || e.which
            if (code === 13) {
                creatTodo()
            }
        }
        todolist.addEventListener("click", function(e = evt) {
            var target = e.target || e.srcElement
            if (target.nodeName === "INPUT") {

                toggle_li.call(target)

            }
            if (target.nodeName === "P") {

                edit().call(target)
            }
            if (target.nodeName === "A") {

                removeele.call(target)
            }
        })
        todolist.addEventListener("blur", function(e = event) {
            var target = e.target || e.srcElement
            if (target.nodeName === "INPUT") {
                save.call(target)
                console.log(1);
            }
        })
        donelist.addEventListener("click", function(e = event) {
            var target = e.target || e.srcElement
            if (target.nodeName === "A") {
                removeele.call(target)
                console.log(1);
            }
            if (target.nodeName === "INPUT") {
                toggle_li.call(target)
            }
        })
    }

    function creatTodo() {
        var todo = `        <li>
                              <input type="checkbox" >
                              <p>${title.value}</p>
                              <a href="javascript:void(0)">-</a>
                        </li>`
        todolist.innerHTML += todo
        countNum()
        title.value = ""
    }

    function toggle_li(target) {
        if (this.checked) {
            donelist.appendChild(this.parentNode)
        } else {
            todolist.appendChild(this.parentNode)
        }
        countNum()
    }

    function edit(target) {
        if (this.children().length > 0) {
            return false
        }
        var html = this.text();
        this.innerHTML = `<input type="text" value="${this.text()}">`
        this.children().select()
    }

    function save(target) {
        this.parentNode.innerHTML = this.value
    }

    function removeele(target) {
        console.log(this);
        this.parentNode.remove()
        countNum()
    }

    function countNum() {
        todocount.innerHTML = (todolist.children.length)
        donecount.innerHTML = (donelist.children.length)
    }
    bindEvent();
</script>

</html>